<template>
	<view class="cardcode_box">
		<view class="cardsStyle">
			<u-image
				width="72rpx"
				height="72rpx"
				border-radius="72rpx"
				class="member-photo"
				:src="detailData.logoUrl"
			></u-image>
			<view class="member-title">
				<view class="member-title-1">
					{{ detailData.storeName }}会员卡
				</view>
				<view class="member-title-2">{{ detailData.cardDesc }}</view>
			</view>
			<u-image
				class="u-margin-top-32"
				width="111rpx"
				height="102.4rpx"
				src="http://img.druglots.cn/image/cardcodelogo.png"
			></u-image>
		</view>
		<view class="show_cardcode">
			<u-image
				class="showcode-img"
				width="48rpx"
				height="52rpx"
				src="http://img.druglots.cn/image/interests.png"
			></u-image>
			<view class="codetext">向商家出示会员码</view>
			<!-- 					<view class="barcode-box">
				<Barcode
					text="{"
					detailData.cardNo
					}
					width="{250}"
					height="{60}"
					scale="{4}"
				/>
			</view> -->
			<view class="barcode-box">
				<tki-barcode :opations="opations" />
			</view>

			<text>{{ detailData.cardNo }}</text>
		</view>
		<view class="gridlines"></view>
		<view class="payment"><text>向商家付款</text></view>

		<!-- 		<AtModal isOpened="{" isOpened } class="cardcode-modal">
			<AtModalContent>
				<view
					class="modal-wrap"
					style="{`padding-top:${Taro.getMenuButtonBoundingClientRect().top"
					+
					Taro.getMenuButtonBoundingClientRect().height
					+
					10}rpx`}
					onClick="{"
					this.onClickModal
					}
				>
					<view class="modal-left">
						<Barcode
							text="{"
							detailData.cardNo
							}
							width="{"
							522
							}
							height="{116}"
							scale="{4}"
						/>
					</view>

					<view class="modal-right">
						<view class="number">{ detailData.cardNo }</view>
						<view class="description">向商家出示会员码</view>
					</view>
				</view>
			</AtModalContent>
		</AtModal> -->
	</view>
</template>

<script>
import { getdetail } from '@/api/http/card.js'
import tkiBarcode from '@/components/tki-barcode/tki-barcode.vue'
export default {
	components: { tkiBarcode },
	data() {
		return {
			detailData: {},
			domainPrefix: '',
			opations: {
				// format: "CODE128",//选择要使用的条形码类型 微信支持的条码类型有 code128\code39\ena13\ean8\upc\itf14\
				width: 4, //设置条之间的宽度
				height: 120, //高度
				displayValue: false, //是否在条形码下方显示文字
				textMargin: 0, //设置条形码和文本之间的间距
				fontSize: 38 //设置文本的大小
			}
		}
	},
	// 取路由参数
	onLoad(opt) {
		this.domainPrefix = opt.domainPrefix
	},
	created() {
		this.getcarddetail()
	},
	methods: {
		// 获取会员卡详情
		getcarddetail() {
			getdetail({ domainPrefix: this.domainPrefix }).then(res => {
				if (res.code === 200) {
					let data = res.data
					data.cardNo = res.data.cardNo.replace(/(.{4})/g, '$1 ')
					this.detailData = data
				} else {
					uni.showToast({
						title: res.message,
						icon: 'warning'
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.cardcode_box {
	background-color: #f3f3f6;
	overflow: hidden;
	height: 100vh;
	box-sizing: border-box;
}

.cardsStyle {
	width: 634rpx;
	height: 134rpx;
	background: #fd624c;
	margin: 26rpx 58rpx 0 58rpx;
	border-radius: 22rpx 22rpx 0rpx 0rpx;
	display: flex;
	justify-content: space-around;

	.member-photo {
		margin: 33rpx 19rpx 29rpx 33rpx;
		flex-shrink: 0;
		border: 1rpx solid rgba(251, 253, 251, 1);
	}

	.member-title {
		font-family: 'PingFang SC';
		font-weight: 500;
		margin-top: 30rpx;
		color: rgba(255, 255, 255, 1);

		.member-title-1 {
			font-size: 28rpx;
		}

		.member-title-2 {
			width: 400rpx;
			height: 35rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 24rpx;
		}
	}

	// .qrcode-img {
	// 	width: 111rpx;
	// 	height: 102.4rpx;
	// 	margin-top: 33rpx;
	// }
}

.show_cardcode {
	width: 634rpx;
	height: 395rpx;
	overflow: hidden;
	margin: 0 auto;
	background: #fff;

	.showcode-img {
		display: block;
		margin: 36rpx auto 16rpx auto;
	}

	.barcode-box {
		display: flex;
		justify-content: center;
		padding: 20rpx 0;
	}

	.codetext {
		font-size: 30rpx;
		font-family: 'PingFang SC';
		font-weight: 500;
		text-align: center;
		color: rgba(68, 68, 68, 1);
	}

	.taro-img {
		display: block;
		margin: 26rpx auto 21rpx auto;
	}

	text {
		font-size: 38rpx;
		font-family: 'PingFang SC';
		font-weight: 500;
		text-align: center;
		display: block;
		color: rgba(0, 0, 0, 1);
	}
}

.gridlines {
	width: 634rpx;
	height: 16rpx;
	background: #f1f1f1;
	margin: 0 auto;
}

.payment {
	width: 634rpx;
	height: 120rpx;
	margin: 0 auto;
	background: #fff;
	box-shadow: 1rpx 5rpx 7rpx 1rpx rgba(42, 42, 42, 0.22);
	border-radius: 0rpx 0rpx 22rpx 22rpx;

	text {
		font-size: 30rpx;
		font-family: 'PingFang SC';
		font-weight: 500;
		color: rgba(136, 136, 136, 1);
		display: block;
		line-height: 120rpx;
		text-align: center;
	}
}

.cardcode-modal {
	.at-modal__container {
		width: 100vw;
		height: 100vh;
	}

	.at-modal__content {
		max-height: initial;
	}

	.modal-wrap {
		position: relative;
		width: 100vw;
		height: 100vh;

		.modal-left {
			position: absolute;
			transform: rotate(90deg);
			transform-origin: 0;
			left: 50%;
		}

		.modal-right {
			position: absolute;
			transform: rotate(90deg);
			top: 50%;
			text-align: center;

			.number {
				font-size: 38rpx;
				color: #000;
				margin-bottom: 19rpx;
			}

			.description {
				color: #444;
				font-size: 30rpx;
			}
		}
	}
}
</style>
